<template>

      <div class="main">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
         
        >
          

          
            

          <el-form-item label="产品名称">
            <el-input
              v-model="formData.name"
              maxlength="20"
              minlength="3"
              show-word-limit
    
              placeholder="请输入产品名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="产品年利率">
            <el-input
              v-model="formData.rate"
              maxlength="20"
              minlength="3"
              show-word-limit
    
              placeholder="请输入产品利率"
            ></el-input>
          </el-form-item>

          <el-form-item label="最大贷款金额">
            <el-input
              v-model="formData.maxMoney"
              maxlength="20"
              minlength="3"
              show-word-limit
           
              placeholder="请输入最大贷款金额"
            ></el-input>
          </el-form-item>

         <el-form-item label="还款周期">
            <el-input
              v-model="formData.time"
              maxlength="20"
              minlength="3"
              show-word-limit
           
              placeholder="请输入还款周期(月)"
            ></el-input>
          </el-form-item>

         

          <el-form-item>
            <el-button type="primary" @click="add">立即添加</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

</template>

<script>
import global from "@/global.js";
export default {
  
  data() {
    return {


      formData: {
        name: "",
        rate: "",
        maxMoney: "",
        time: "",
      },

     
    };
  },
  methods: {
    

    /*

                *提交申请
                */
    add() {
      console.log("产品信息---------------");
      console.log(this.formData);
      this.$axios
        .post(global.server + "/api/product/add", this.formData)
        .then((response) => {
          console.log(response);
          let result = response.data;
          if (result.code == 200) {

            this.$alert("产品添加成功!");
          }
        });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

/**
 * 弹框
 */
    open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
  },
};
</script>

<style scope>
.main{
  width: 319px;
  /* margin: auto; */
  /* border: 1px solid #ccc; */
}

</style>